<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-08-29 10:59:21
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 18:03:15
 * @FilePath: \ft-apply-admin\src\components\Application\src\AppLogo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Mcc
 * @Date: 2024-07-29 17:43:55
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 17:33:11
 * @FilePath: \ft-apply-admin\src\components\Application\src\AppLogo.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<script lang="ts" setup>
import { computed, unref } from 'vue'
import { useGlobSetting } from '@/hooks/setting'
import { useGo } from '@/hooks/web/usePage'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { PageEnum } from '@/enums/pageEnum'

const props = defineProps({
  // 当前父组件的主题
  theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
  // 是否显示标题
  showTitle: { type: Boolean, default: true },
  // 折叠菜单时也会显示标题
  alwaysShowTitle: { type: Boolean },
})

const { prefixCls } = useDesign('app-logo')
const { getCollapsedShowTitle } = useMenuSetting()
const { title } = useGlobSetting()
const go = useGo()

const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }])

const getTitleClass = computed(() => [
  `${prefixCls}__title`,
  {
    'xs:opacity-0': !props.alwaysShowTitle,
  },
])

function goHome() {
  go('/TodayEvent/todo')
}
const { getCollapsed, toggleCollapsed } = useMenuSetting()
</script>

<template>
  <div class="anticon relative" :class="getAppLogoClass" @click="goHome" :style="{paddingLeft:showTitle?'26px':'10px'}">
    <img src="@/assets/images/logomini.png" class="logo-mini" >
    <div v-show="showTitle" class="ml-2 truncate md:opacity-100" :class="getTitleClass">
      {{ title }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.anticon{
  display: flex;  
  justify-content: flex-start;
  color: #FFF;
  font-size: 16px;
  padding:10px;
  .logo-mini{
    height: 32px;
  }
  .logo-big{
    width: 120px;
  }
  img{
    height: unset
  }
}
</style>
